import LC_ICON from '@/assets/img/ico_LC.png';
import LC_failureICON from '@/assets/img/ico_LC_failure.png';
import LC_offline_ICON from '@/assets/img/ico_LC_offline.png';
import LC_online_ICON from '@/assets/img/ico_LC_online.png';
import { Flex } from 'antd';
import ReactFlow, { MarkerType } from 'reactflow';

import React, { useEffect, useState } from 'react';
import 'reactflow/dist/style.css';
import { useIntl } from 'umi';
import Styles from './../index.less';

const iconMap = new Map<number | null, Node>([
  [null, LC_ICON],
  [1, LC_online_ICON],
  [2, LC_failureICON],
  [3, LC_offline_ICON],
]);
type IProps = {
  lcNodes: API.LcNode[];
  changeNode: (data: any) => void;
};
const Chart: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const nodeStyle = { border: '0', padding: 0, boxShadow: 'unset' };
  const { lcNodes, changeNode } = props;
  const initialNodes = [];
  const [flowNodes, setFlowNodes] = useState(initialNodes);
  const commonEdges = {
    type: 'smoothstep',
    markerEnd: {
      type: MarkerType.ArrowClosed,
      width: 30,
      height: 20,
    },
  };
  const [initialEdges, setInitialEdges] = useState([]);
  useEffect(() => {
    const centerPosition = 1000 / 2 - 100;

    const getNodes = JSON.parse(JSON.stringify(lcNodes));
    if (lcNodes.length > 0) {
      const sumLc = getNodes.shift();
      const sumLcNode = {
        id: '1',
        position: { x: centerPosition, y: 0 },
        data: {
          label: (
            <div className={Styles.lcRealtime}>
              <img src={iconMap.get(sumLc?.state)} style={{ width: 148, height: 159 }} />
              <div className={Styles.lcRealtimeTitle} style={{ paddingLeft: 22 }}>
                {intl.formatMessage({ id: 'systemManagement.neddTochange.totalLC' })}
              </div>
            </div>
          ),
        },
        style: nodeStyle,
        type: 'input',
      };

      const xPositionArr = {
        1: [centerPosition],
        2: [200, 600],
        3: [100, centerPosition, 700],
        4: [100, 300, 500, 700],
        5: [0, 200, centerPosition, 600, 800],
        6: [0, 170, 320, 480, 630, 800],
      };

      const restNodes = getNodes.map((item: API.LcNode, index: number) => {
        const xPosition = xPositionArr[getNodes.length];
        return {
          id: String(index + 2),
          position: { x: xPosition[index], y: 280 },
          data: {
            value: item,
            label: (
              <div className={Styles.lcRealtime}>
                <img src={iconMap.get(item.state)} style={{ width: 148, height: 159 }} />
                <div className={Styles.lcRealtimeTitle}>{item.name}</div>
                <div className={Styles.lcRealtimeText}>
                  `${intl.formatMessage({ id: 'stationRealtimeMonitoring.realTimePower' })}`
                  {item.power}
                </div>
              </div>
            ),
          },
          style: nodeStyle,
          type: 'output',
        };
      });
      const edges = getNodes.map((item, index) => {
        return {
          id: `e1-${index}`,
          source: '1',
          target: String(index + 2),
          ...commonEdges,
        };
      });
      setFlowNodes([sumLcNode, ...restNodes]);
      setInitialEdges(edges);
    }
  }, [lcNodes]);
  return (
    <Flex justify="center">
      {lcNodes?.length ? (
        <div style={{ width: '1000px', height: 470, marginTop: 20 }}>
          <ReactFlow
            nodes={flowNodes}
            edges={initialEdges}
            zoomOnScroll={false}
            panOnDrag={false}
            preventScrolling={true}
            onNodeClick={(event, node) => {
              changeNode(node);
            }}
            className={Styles.lcFlow}
          />
        </div>
      ) : null}
    </Flex>
  );
};
export default Chart;
